<section
    class="component-data"
>
    <div class="demo-container {% if hasDemoControls %}with-controls{% endif %} {% if hasDemoTemplate %}with-demo{% endif %}">
        {% if hasDemoTemplate %}<demo-container
            class="demo-preview"
        ></demo-container>{% endif %}
        {% if hasDemoControls %}<sp-field-group
            vertical
            class="demo-config"
        >{% for demoControl in demoControls %}
            <div class="control-container">
                <sp-field-label for="{{ demoControl.name }}">{{ demoControl.name }}</sp-field-label>
                {% if ['select','boolean','radio','inline-radio'].includes(demoControl.control.type) %}
                <sp-picker class="demo-control" value="{{ demoControl.table.defaultValue.summary }}" id="{{ demoControl.name }}">
                    {% for option in demoControl.control.options %}
                    <sp-menu-item value="{{ option }}">{{ option }}</sp-menu-item>
                    {% endfor %}
                    {% for name, item in demoControl.control.labels %}
                    <sp-menu-item value="{{ name }}">{{ item }}</sp-menu-item>
                    {% endfor %}
                    {% if demoControl.type.name === 'boolean' %}
                    <sp-menu-item>true</sp-menu-item>
                    <sp-menu-item>false</sp-menu-item>
                    {% endif %}
                </sp-picker>
                {% elif demoControl.control === 'text' %}
                    <sp-textfield class="demo-control" value="{{ demoControl.table.defaultValue.summary }}" id="{{ demoControl.name }}"></sp-textfield>
                {% elif demoControl.control === 'number' %}
                    <sp-number-field class="demo-control" value="{{ demoControl.table.defaultValue.summary }}" id="{{ demoControl.name }}" min="{{ demoControl.min }}" max="{{ demoControl.max }}"></sp-number-field>
                {% endif %}
            </div>
        {% endfor %}</sp-field-group>{% endif %}
    </div>
    <div
        class="usage-links"
    >
        <sp-card
            size="s"
            horizontal
            href="https://www.npmjs.com/package/@spectrum-web-components/{{ componentPackage }}"
            target="_blank"
        >
            <p slot="heading">NPM {% packageVersion componentPackage %}</p>
            <sp-icon
                slot="preview"
            >
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="540px" height="210px" viewBox="0 0 18 7">
<path fill="#CB3837" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z"/>
<polygon fill="#FFFFFF" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 "/>
<path fill="#FFFFFF" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z"/>
<polygon fill="#FFFFFF" points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 "/>
</svg>
            </sp-icon>
        </sp-card>
        {% if spectrumURLs.urls[componentPackage] %}
        <sp-card
            size="s"
            horizontal
            href={{ spectrumURLs.urls[componentPackage]}}
            target="_blank"
        >
            <p slot="heading">Spectrum guidelines</p>
            <sp-icon
                slot="preview"
            >
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 30 26" width="36px" xml:space="preserve" role="img" aria-label="Adobe">
        <path fill="#FA0F00" d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"></path>
    </svg>
            </sp-icon>
        </sp-card>
        {% endif %}
         {% if storybookURLs.urls[componentPackage] %}
        <sp-card
            size="s"
            horizontal
            href={{ storybookURLs.urls[componentPackage]}}
            target="_blank"
        >
            <p slot="heading">View Storybook</p>
            <sp-icon
                slot="preview"
            >
                <svg viewBox="-31.5 0 319 319" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <path d="M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z" id="path-1"> </path> </defs> <g> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"> </use> </mask> <use fill="#FF4785" fill-rule="nonzero" xlink:href="#path-1"> </use> <path d="M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)"> </path> </g> </g></svg>
            </sp-icon>
        </sp-card>
        {% endif %}
        {% if demoURLs.urls[componentPackage] %}
        <sp-card
            size="s"
            horizontal
            href={{ demoURLs.urls[componentPackage]}}
            target="_blank"
        >
            <p slot="heading">Try it on Stackblitz</p>
            <sp-icon
                slot="preview"
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="78" viewBox="0 0 56 78" fill="none">
                    <path d="M23.4273 48.2853C23.7931 47.5845 23.0614 46.8837 22.3298 46.8837H1.11228C0.0148224 46.8837 -0.350997 45.8326 0.380642 45.1318L40.9866 0.282084C41.7182 -0.418693 43.1815 0.282084 42.8157 1.33325L32.9386 30.0651C32.5727 30.7659 32.9386 31.4666 33.6702 31.4666H54.8877C55.9852 31.4666 56.351 32.5178 55.6194 33.2186L15.0134 77.7179C14.2818 78.4187 12.8185 77.7179 13.1843 76.6667L23.4273 48.2853Z" fill="#1389FD"/>
                </svg>
            </sp-icon>
        </sp-card>
        {% endif %}
    </div>
</section>
{% if hasDemoTemplate %}
<script type="module">
    import { Template } from '@swc-packages-internal/{{ componentPackage }}/stories/template.js';
    import { render } from 'lit';
    const demo = document.querySelector('.demo-preview');
    const config = document.querySelector('.demo-config');
    function getArgs() {
        const args = {};
        if (!config) {
            return args;
        }
        const form = config.querySelectorAll('.demo-control');
        form.forEach(arg => {
            args[arg.id] = arg.value === 'false' ? false : arg.value;
        })
        return args;
    }
    const renderDemo = (args = {}) => {
        // Pass componentName to Template for variant detection
        args.componentName = '{{ componentName }}';
        render(Template(args), demo);
    };
    if (config) {
        config.addEventListener('change', () => {
            renderDemo(getArgs());
        });
    }
    customElements.whenDefined('sp-picker').then(() => {
        const defaultArgs = getArgs();
        console.log(defaultArgs);
        renderDemo(defaultArgs);
    });
</script>
{% endif %}